<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <c:if test="#{publicCalendarBean.publicUser != null}" >
            <title>#{publicCalendarBean.publicUser.getFullName()}'s Calendar</title>
            <c:otherwise>
                <title>Search Error</title>
            </c:otherwise>
        </c:if>
        <h:outputStylesheet library="css" name="main.css"  />
    </h:head>
    <h:body>
        <div id="container">
            <ui:include src="logo.xhtml" />
            <div id="actionMenu">
                <h:form>
                    <p:button value="← Home" outcome="calendar" />             
                    <p:commandButton value="Notifications #{notificationsBean.getNotificationsCount()}" 
                                     id="openNotifButton"/>
                    <p:overlayPanel id="Notifications" for="openNotifButton" hideEffect="fade" dynamic="true" style="width:600px">
                        <c:set var="notifications" value="#{notificationsBean.getInvitations()}" scope="request" />

                        <c:forEach var="wa" items="#{notificationsBean.getWeatherAlerts()}" varStatus="status">
                            <div class="notification" id="notificationsMenu">
                                <p><b>Bad weather</b> detected for <em><b>#{wa.getEvent().getTitle()}</b></em>
                                    on #{notificationsBean.formatDate(wa.getEvent().getStartDate())}</p>
                                <c:if test="#{wa.getAlternativeDate() != null}" >
                                    <p>The closest sunny day is <b>#{notificationsBean.formatDate(wa.getAlternativeDate())}</b></p>
                                </c:if>
                                <h:form>
                                    <p:commandLink value="Dismiss notification" class="declineButton"
                                                   action="#{notificationsBean.markAsViewedWeatherAlert(wa)}"/>
                                    <c:if test="#{wa.getEvent().getOwner() == calendarBean.getLoggedUser()}" >
                                        <p:commandLink value="Reschedule Event" class="acceptButton"
                                                       action="#{notificationsBean.openEventForRescheduling(wa)}"/>
                                    </c:if>
                                </h:form>
                            </div>
                        </c:forEach>

                        <c:forEach var="notif" items="#{notificationsBean.getInvitations()}" varStatus="status">
                            <div class="notification" id="notificationsMenu">
                                <p><b>#{notif.getEvent().getCalendar().getOwner().getFullName()}</b>
                                    invited you to the event <em><b>#{notif.getEvent().getTitle()}</b></em>
                                    on <b>#{notificationsBean.formatDate(notif.getEvent().getStartDate())}</b></p>
                                <h:form>
                                    <p:commandLink value="Accept" class="acceptButton"
                                                   action="#{notificationsBean.acceptInvitation(notif)}"/>
                                    <p:commandLink value="Decline" class="declineButton"
                                                   action="#{notificationsBean.declineInvitation(notif)}"/>
                                </h:form>
                            </div>
                        </c:forEach>
                        <c:if test="#{notificationsBean.getInvitations().isEmpty() and notificationsBean.getWeatherAlerts().isEmpty()}">
                            <p>No new notifications for now.</p>
                        </c:if>
                    </p:overlayPanel>
                    <p:button value="Settings" outcome="settings" />             
                    <p:commandButton action="#{loginBean.logout()}" value="Logout" />

                    <p:autoComplete value="#{publicCalendarBean.searchedUser}" 
                                    completeMethod="#{userSearchBean.completeUserSearch}" 
                                    var="user1"
                                    itemLabel="#{user1.getFullName()}"
                                    itemValue="#{user1}" 
                                    converter="inviteeConverter"
                                    forceSelection="true"
                                    placeholder="Search for Users">
                        <p:ajax event="itemSelect" listener="#{userSearchBean.onUserSelect}" />
                    </p:autoComplete>


                </h:form>
            </div>
            <c:if test="#{publicCalendarBean.publicUser == null}" >
                <div class="error">
                    <p>The searched user doesn't exist or his/her calendar is private. Try searching again.</p>
                </div>
            </c:if>

            <c:if test="#{publicCalendarBean.publicUser != null}" >
                <h2 style="text-align: center;">#{publicCalendarBean.publicUser.getFullName()}'s Public Calendar</h2>
                <h:form id="eventForm">
                    <p:growl id="messages" showDetail="true" />

                    <h:panelGrid columnClasses="value">
                        <p:schedule id="my_schedule" value="#{publicCalendarBean.scheduleModel}" widgetVar="myschedule" timeZone="GMT+1">
                            <p:ajax event="eventSelect" listener="#{publicCalendarBean.onEventSelect}" update="eventDetails" />
                        </p:schedule>
                    </h:panelGrid>

                    <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip" position="center top">
                        <h:panelGrid id="eventDetails" columns="2">
                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="title" value="Title:" />
                            </p:column>
                            <p:column>
                                <p:inputText id="title" value="#{publicCalendarBean.event.title}" rendered="#{publicCalendarBean.event.isEditable()}" />
                                <h:outputText id="titleNE" value="#{publicCalendarBean.event.title} (by #{publicCalendarBean.event.getOwner().getFullName()})" rendered="#{!publicCalendarBean.event.isEditable()}" />
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="from" value="From*:" />
                            </p:column>
                            <p:column>
                                <p:calendar id="from" value="#{publicCalendarBean.event.startDate}" pattern="dd/MM/yyyy HH:mm:ss"
                                            disabled="#{!publicCalendarBean.event.isEditable()}">                                  
                                </p:calendar>
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="to" value="To*:" />
                            </p:column>
                            <p:column>
                                <p:calendar id="to" value="#{publicCalendarBean.event.endDate}" pattern="dd/MM/yyyy HH:mm:ss" 
                                            disabled="#{!publicCalendarBean.event.isEditable()}"> 
                                    <p:ajax event="dateSelect" update="messages" listener="#{publicCalendarBean.handleEndDateSelect}" />
                                </p:calendar>
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="geocomplete" value="Location:" />
                            </p:column>
                            <p:column>
                                <p:inputText id="geocomplete" class="geocomplete" value="#{publicCalendarBean.event.location.description}" 
                                             rendered="#{publicCalendarBean.event.isEditable()}">
                                </p:inputText>
                                <h:outputText value="#{publicCalendarBean.event.location.description}" 
                                              rendered="#{!publicCalendarBean.event.isEditable() and !publicCalendarBean.event.location.description.isEmpty()}" />
                                <h:outputText value="No location provided" 
                                              rendered="#{!publicCalendarBean.event.isEditable() and publicCalendarBean.event.location.description.isEmpty()}" />
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="outdoor" value="Outdoor:" />
                            </p:column>
                            <p:column>
                                <p:selectBooleanCheckbox id="outdoor" value="#{publicCalendarBean.event.outdoor}" disabled="#{!publicCalendarBean.event.isEditable()}" >
                                </p:selectBooleanCheckbox >
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" for="publicEvent" value="Public:" />
                            </p:column>
                            <p:column>
                                <p:selectBooleanCheckbox id="publicEvent" value="#{publicCalendarBean.event.publicEvent}" disabled="#{!publicCalendarBean.event.isEditable()}" />
                            </p:column>

                            <p:column>
                                <h:outputLabel class="eventDialogLabel" value="Invitees:" for="invitee" />
                            </p:column>
                            <p:column>
                                <p:autoComplete id="invitee" multiple="true" value="#{publicCalendarBean.invitees}" completeMethod="#{publicCalendarBean.completeInvitee}"
                                                var="user" itemLabel="#{publicCalendarBean.autoCompleteItemLabelForUser(user)}" 
                                                itemValue="#{user}" converter="inviteeConverter" forceSelection="true" immediate="true"
                                                disabled="#{!publicCalendarBean.event.isEditable()}" 
                                                placeholder="Search for Users (name, surname, email, city, ...)">
                                    <p:column>
                                        <h:outputText value="#{user.getFullName()}" />
                                    </p:column>
                                    <p:ajax event="itemSelect" listener="#{publicCalendarBean.selectInviteeListener}" />
                                    <p:ajax event="itemUnselect" listener="#{publicCalendarBean.unselectInviteeListener}" />
                                </p:autoComplete>
                            </p:column>

                            <p:row>
                                <p:column colspan="2">
                                    <p:inputText id="lat" class="latitude" value="#{publicCalendarBean.event.location.latitude}" type="hidden" />
                                    <p:inputText id="lng" class="longitude" value="#{publicCalendarBean.event.location.longitude}" type="hidden" />
                                    <p:inputText id="placeid" class="place_id" value="#{publicCalendarBean.event.location.placeIdentifier}" type="hidden" />   
                                </p:column>
                            </p:row>         

                            <p:row></p:row>

                            <p:row/>
                            <p:row>
                                <p:column colspan="2" rendered="#{publicCalendarBean.event.isEditable()}">
                                    <p:commandButton id="addButton" value="Save" styleClass="ui-priority-primary" style="float:right;" actionListener="#{publicCalendarBean.addEvent}" update="messages" />
                                </p:column>
                            </p:row>
                        </h:panelGrid>
                    </p:dialog>    
                </h:form>
            </c:if>
        </div>
    </h:body>
</html>

